<template>
  <div>
    <el-card style="border:none;">
      <el-row>
        <el-col :span="5">
          <el-card shadow="never"  style="margin-top:50px;">
            <span>CPU</span>
              <appPie 
                    ref="cpuPie"
                    :options="cpuVRingSetting"
                    ></appPie>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card shadow="never" style="margin-top:50px;">
            <span>内存</span>
            	<appPie 
				      		ref="ncPie"
				      		:options="ncVRingSetting"
				      		></appPie>
          </el-card>
        </el-col>
        <el-col :span="12" :offset="1">
          <el-card shadow="never" v-if="zhexianshow">
            	<appLine ref="wlLine"></appLine>
          </el-card>
          <!-- <span  v-if="!zhexianshow">暂无网络数据</span> -->
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>




<script>
  import appPie from "@/view/components/vcharts/pie";
  import appLine from "@/view/components/vcharts/line";
  import {getContainerDashboard,getContainerNet} from "@/service/swagger/ContainerController.js"
  import { getAppInstById } from '@/service/swagger/AcAppInstController'

  export default{
    props:["ip","appContainerId","isShow"],
    components:{
      appPie,
		  appLine,
    },
    data(){
      return{
        id:this.$route.query.id,
        zhexianshow:true,
        // cpu
        cpuVRingSetting: {
          title: {
            text: "CPU"
          },
          extend: {
            tooltip: {
              trigger: 'item',
              formatter: 'cpu <br/>{b}'
            },
          }
        },
        // 内存
        ncVRingSetting: {
          title: {
            text: "内存"
          },
          extend: {
            tooltip: {
              trigger: 'item',
              formatter: '内存 <br/>{b}({d}%)'
            },
          }
        },
        wlParams: {
          ethoName: "",
          dateParam: "",
        }
      }
    },
    mounted() {
    },
    watch:{
      isShow(val){
        if(val){
          this.initJKData()
        }
      }
    },
    methods:{
      initJKData(){
        let str = this.appContainerId.substr(0,12)
        let params = {
          appContainerId:str,
          dateParam:"24h",
          ip:this.ip
        }
        // 环形图
        getContainerDashboard(params).then(ret=>{
            // init cpu
            console.log(ret)
            this.$refs.cpuPie.init({
              columns: ['name', 'value'],
              rows: ret.cpuRow,
            });
            // init 内存
            this.$refs.ncPie.init({
              columns: ['name', 'value'],
              rows: ret.ncRow,
            });
        })
        // 折线图
        getContainerNet(params).then(ret=>{
            let dw = ""
            let data = [];
            if (ret && ret.data && ret.data.length) {
              console.log(ret.data)
              this.zhexianshow = true
              data = ret.data.map(el => ({
                "date": el['date'],
                "接收量": parseFloat(el.bytesRecv).toFixed(2),
                "发送量": parseFloat(el.bytesSent).toFixed(2),
              }))
              dw = ret.data[0] && ret.data[0].bytesRecv ? ret.data[0].bytesRecv.match(/[a-zA-Z]$/)[0] : "";
            }else{
               this.zhexianshow = false
            }
            this.$refs.wlLine.init({
              dw: dw,
              columns: ['date', '接收量', '发送量'],
              rows: data
            });
        })
      },
    }
  }
</script>